<template>
  <div id="nav">
    <a-row type="flex" align="middle">
      <a-col :span="2">
        <div class="nav-btn-list">
          <div class="nav-btn">
            <a-icon type="left" />
          </div>
          <div class="nav-btn">
            <a-icon type="right" />
          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <a-input-search class="nav-search" placeholder="搜索音乐" style="width: 230px" @search="onSearch" />
      </a-col>
      <a-col :span="8" :offset="8">
        <a-row type="flex" align="middle" justify="end">
          <a-col>
            <div class="nav-ava">
              <div v-if="isLogin">tt</div>
              <div v-else class="nav-no">
                <a-icon type="user" />
              </div>
            </div>
          </a-col>
          <a-col>
            <span class="nav-user-name">未登录</span>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    onSearch() {},
  },
};
</script>

<style lang="scss" scoped>
#nav {
  height: 100%;
}
.nav-btn {
  cursor: pointer;
  &:hover i {
    color: #fff;
  }
  i {
    transition: 0.2s color;
    color: rgb(94, 94, 95);
  }
}
.nav-btn-list {
  display: flex;
  .nav-btn {
    width: 20px;
    margin: 0 8px;
  }
}
.nav-search {
  border-radius: 999px;
  display: block;
  overflow: hidden;
}
.nav-ava {
  cursor: pointer;
  display: flex;
  .nav-no {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #6e6f6f;
    display: flex;
  }
  i {
    margin: auto;
    color: #6e6f6f;
    transform: scale(1.3);
  }
}
.nav-user-name {
  cursor: pointer;
  margin-left: 10px;
  font-size: 13px;
  color: #6e6f6f;
}
</style>
